﻿@model Tuple<deviceManage.Models.DevicePlan,            
            List<deviceManage.Models.Project>,
            List<deviceManage.Models.ServiceContract>>
@{
    ViewData["Title"] = "运维计划";
}
<style>
    .layui-layout-body {
        overflow: auto;
    }
    

    .layui-form-label {
        width: auto;
    }
    .editForm .layui-form-label {
        width: 70px;
    }
    .layui-form-item .layui-input-inline{
        width:138px;
    }
    .layui-input-inline.longInput {
        width: 350px;
    }

    .plan_month_ul {
        display: none;
        width: 430px;
        margin-top: 20px;
    }
    .plan_month_ul.active{
        display:block;
    }
    .plan_month_li {
        display: inline-block;
        width: 22px;
        text-align: center;
        cursor: pointer;
        margin-right: 10px;
        border: 1px solid #ddd;
    }

   .plan_month_li.active {
            background-color: #009688;
            color:white;
   }

</style>

 
        <div class="layui-fluid" style="padding-bottom:85px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">计划信息</div>
                        <div class="layui-card-body" style="padding: 15px;">
                            <form class="layui-form editForm" action="" lay-filter="component-form-group">
                                <input type="hidden" name="id" id="id" value="@Model.Item1.Id" />
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">计划名称</label>
                                        <div class="layui-input-inline longInput" >
                                            <input type="text" name="Name" value="@Model.Item1.Name" lay-verify="required" autocomplete="off" class="layui-input" maxlength="100">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">开始时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="StartTime" id="buyDate" readonly autocomplete="off"
                                                   class="layui-input date" value="@if(Model.Item1.StartTime != null){@Model.Item1.StartTime.Value.ToString().Substring(0, 10); } ">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">结束时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="EndTime" id="receiveDate" readonly autocomplete="off"
                                                   class="layui-input date" value="@if(Model.Item1.EndTime != null){@Model.Item1.EndTime.Value.ToString().Substring(0, 10); } ">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">计划负责人</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="user" autocomplete="off" class="layui-input" value="@Model.Item1.User" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">计划参与人</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="UserParticipate" lay-verify="required" value="@Model.Item1.UserParticipate" autocomplete="off" class="layui-input" maxlength="100">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="layui-form-item">
                                    <div class="layui-block">
                                        <label class="layui-form-label">执行月份</label>
                                        <div class="layui-input-inline" id="planTimes">                                            
                                        </div>
                                    </div>

                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">所属项目</label>
                                        <div class="layui-input-inline longInput">
                                            <select name="ProjectId">
                                                @foreach (var type in Model.Item2)
                                                {
                                                    @if (type.Id.Equals(Model.Item1.ProjectId))
                                                    {
                                                        <option value="@type.Id" selected>@type.Name</option>
                                                    }
                                                    else
                                                    {
                                                        <option value="@type.Id">@type.Name</option>
                                                    }
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">维护合同</label>
                                        <div class="layui-input-inline longInput" >
                                            <select name="ServiceContract" lay-filter="ServiceContract" lay-search>
                                                @foreach (var type in Model.Item3)
                                                {
                                                    @if (type.Id.Equals(Model.Item1.ContractId))
                                                    {
                                                        <option value="@type.Id" selected>@type.Title</option>
                                                    }
                                                    else
                                                    {
                                                        <option value="@type.Id">@type.Title</option>
                                                    }
                                                }
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                 

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">计划说明</label>
                                        <div class="layui-input-inline longInput" >
                                            <textarea name="remark" placeholder="请输入" class="layui-textarea">@Model.Item1.Remark</textarea>
                                        </div>
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <div class="layui-footer">
                                            <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
                                            <button type="reset" onclick="window.parent.layer.closeAll()" class="layui-btn layui-btn-primary">返回</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            设备列表
                            <button type="button" class="layui-btn layui-btn-xs" onclick="selectDevice()" id="uploadPicBtn" style="margin-left:20px;">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                        </div>
                        <div class="layui-card-body" style="padding: 15px;">
                            
                                <table class="layui-table layuiadmin-page-table" id="deviceTable" lay-skin="line"></table>
                            
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            相关资料
                            <button type="button" class="layui-btn layui-btn-xs" id="uploadBtn" style="margin-left:20px;">
                                <i class="layui-icon layui-icon-upload-drag"></i>上传
                            </button>
                        </div>
                        <div class="layui-card-body" style="padding: 15px;">
                            <table class="layui-table layuiadmin-page-table" id="fileTable" lay-skin="line"></table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
 
<script>

    window.parent.planId = "@Model.Item1.Id";

  
    
    //选择设备
    function selectDevice() {          
        $.get("/DevicePlan/selectDevice?id=@Model.Item1.Id", function (str) {
                var index = window.parent.layer.open({
                    type: 1,
                    area:["1000px","500px"],
                    title: '选择设备',
                    content: str //注意，如果str是object，那么需要字符拼接。
            });


            form.render(null, 'app-content-list');

            //监听搜索
            form.on('submit(search)', function (data) {                
                var field = data.field;
                console.log(field)
                //执行重载
                table.reload('deviceList', {
                    where: field
                });
            });  
         }); 
    }



    //上传文件
    var id = $('#id').val();
    upload.render({
        elem: "#uploadBtn" //绑定元素
        , url: '/doc/upload?category=0&key=' + id //上传接口
        , accept: 'file'
        , height:'200px'
        , done: function (res) {
            layer.msg(res.msg);
            if (res.code == 1) tableObj.reload();//上传成功，刷新附件table
        }
        , error: function () {
            layer.msg("上传失败！");
        }
    });

    

    //加载table
    var tableObj = table.render({
        elem: '#fileTable'
        , height: '270px'
            , url: '/doc/getAllByObjectId?&category=0&id=@Model.Item1.Id' //其他文件
            , cols: [[
                { field: 'name', title: '文件名称',  templet: '<div><a class="fileLink" href="/doc/download?id={{d.id}}">{{ d.name}}</a></div>' },
                {
                    field: 'opr', title: '操作', width: 120,
                    templet: '<div class="layui-table-cell laytable-cell-11-0-8"><a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteItem(\'{{ d.id }}\')"><i class="layui-icon layui-icon-delete"></i>删除</a> </div> '
                }
                ]]
        , skin: 'line'
    });

     var tableDevice = table.render({
             elem: '#deviceTable'
         , url: '/devicePlan/PlanDeviceList?id=@Model.Item1.Id' //其他文件
         , height:'250px'
            , cols: [[
                { field: 'name', title: '设备名称',width:180, templet: '<div>{{ d.device.name}}</div>' },
                { field: 'name', title: '设备类型', templet: '<div>{{ d.device.deviceType.name}}</div>' },
                { field: 'deviceId', title: '设备编号', templet: '<div>{{ d.device.deviceId}}</div>' },
                {
                    field: 'opr', title: '操作', width: 130,
                    templet: '<div class="layui-table-cell laytable-cell-11-0-8"><a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteDeviceItem(\'{{ d.id }}\')"><i class="layui-icon layui-icon-delete"></i>删除</a> </div> '
                }
                ]]
        , skin: 'line'
    });

    window.parent.tableDevice = tableDevice;

    //删除
    function deleteDeviceItem(id) {
        window.parent.layer.confirm("确定要将此设备从计划中移除吗？", function (index) {
            window.parent.layer.close(index);
            $.post("/devicePlan/deleteDevice?id=" + id,
                function (res) {
                    layer.msg(res.msg);
                    if (res.code == 1) {
                        tableDevice.reload();
                    }
                });
        });
    }

    //删除文件
    function deleteItem(id) {
        window.parent.layer.confirm("确定要删除附件吗？", function (index) {
            window.parent.layer.close(index);
            $.post("/doc/delete?id=" + id,
                function (res) {
                    layer.msg(res.msg);
                    if (res.code == 1) {
                        tableObj.reload();
                    }
                });
        });
    }


    //最后渲染日期
    laydate.render({ elem: '#buyDate' });
    laydate.render({ elem: '#receiveDate' });
    laydate.render({ elem: '#serviceDate' });
  

    //执行日期的生成
    var timePlan = {
        elem:'',
        render: function (e) {
            var that = this;
            var plan = $('#' + e);
            var year = (new Date()).getFullYear();
            var html = "<select class='planMonthSelect' name='planMonthSelect'  lay-filter='times' >";
            var htmlMonth = "";
            for (var i = year-1; i <year+3; i++) {
                if (i == year) {
                    html += ("<option value='" + i +"' selected>"+i+"</option>");
                } else {
                    html += ("<option value='"+i+"'>" + i + "</option>");
                }

                if (i == year) {
                    htmlMonth += "<ul class='plan_month_ul active plan_month_ul_"+i+"'>"
                } else {
                    htmlMonth += "<ul class='plan_month_ul plan_month_ul_" + i + "'>"
                }
                //生成月份
                for (var j = 1; j <= 12; j++) {
                    htmlMonth += "<li class='plan_month_li plan_month_li_"+i+"_"+j+"' data-month='"+i+"_"+j+"'>"+j+"</li>";
                }
                htmlMonth += "</ul>"
            }
            html += ("</select>");
            plan.append(html);
            plan.append(htmlMonth);


            $('.plan_month_li').click(function () {
                $(this).toggleClass("active");
            });
             
        },

        yearSelected: function (year) {                        
            $(".plan_month_ul").removeClass("active");
            $(".plan_month_ul_"+year).addClass("active");
        },
        getMonthList: function () {
            var result = [];
            $('.plan_month_li').each(function () {
                if ($(this).hasClass("active")){
                    result.push($(this).data("month"));
                }
            });
            return result;
        }
    };

    timePlan.render("planTimes");

    //渲染form
    form.render(null, 'component-form-group');

    /* 监听提交 */
    form.on('submit(save)', function (data) {
        //开始保存信息        
        data.field.month = timePlan.getMonthList();
        $.post("/devicePlan/save", data.field,
            function (e) {
                window.top.layer.msg(e.msg);
                if (e.code == 1) { //保存成功
                    window.parent.tableObj.reload();
                    window.parent.layer.closeAll();
                }
            });
        return false;
    });

    form.on('select(times)', function (data) {
        timePlan.yearSelected(data.value);
    });

    //设置设备执行计划的时间
    $.ajax({
        url: "/devicePlan/GetPlanTimes?id=@Model.Item1.Id",
        success: function (res) {
            var data = res.data;
            for (var i = 0; i < res.data.length; i++) {
                var time = data[i];
                //添加样式
                $(".plan_month_li_" + time.planYear + "_" + time.planMonth).addClass("active");
            }
        }
    });

</script>
